import { AlertProps } from "../types";
import { alertInfo } from "../store";
import { useSetRecoilState } from "recoil";

function Alert(props: AlertProps) {
  // 获取设置 alert 的方法
  const setAlert = useSetRecoilState(alertInfo);

  return (
    <div
      className={["alert", "alert-dismissible", "alert-" + props.type].join(
        " "
      )}
      role="alert"
    >
      <button
        type="button"
        className="close"
        data-dismiss="alert"
        aria-label="Close"
        onClick={() => setAlert({ message: "", type: "default" })}
      >
        <span aria-hidden="true">&times;</span>
      </button>
      <strong>提示!</strong> {props.message}
    </div>
  );
}

export default Alert;
